<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Retro Cinema Registration</title>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.11.3/themes/swanky-purse/jquery-ui.css">
<script src="../../lib/jquery.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="../../dist/jquery.validate.js"></script>
<script>
		$( function() {
			$.validator.addMethod( "adultsOnly", function( value, element ) {
				if ( $( "#movie .adult:checked" ).val() === "on" ) {
					var now = new Date();
					var dob = $( "#dob" ).datepicker( "getDate" );
					var age = now - dob;
					return Math.floor( age / 31536000000 ) >= 18;
				}
				return true;
			} );
			$( "#movie" ).buttonset();
			$( "#customer, #email, #dob, #reserve" ).button();
			$( "#dob" ).datepicker( {
				changeMonth: true,
				changeYear: true,
				yearRange: "-100:+0",
				maxDate: "+0D"
			} );
			$( "#reservation" ).validate( {
				errorClass: "ui-state-error",
				rules: {
					customer: "required",
					email: {
						required: true,
						email: true
					},
					dob: {
						required: true,
						date: true
					},
					movie: {
						required: true,
						adultsOnly: true
					}
				},
				messages: {
					customer: "Please enter your name",
					email: {
						required: "Please enter your email",
						email: "Please enter a valid email"
					},
					dob: {
						required: "Please enter your dob",
						date: "Please enter a valid date"
					},
					movie: {
						required: "Please choose a movie",
						adultsOnly: "This movie is for adults only!"
					}
				},
				errorPlacement: function( error, element ) {
					if ( element.is( ":radio" ) ) {
						$( "<br>" ).appendTo( element.parent().parent().find( "label:first" ) );
						error.appendTo( element.parent().parent().find( "label:first" ) );
					} else {
						$( "<br>" ).appendTo( element.parent().find( "label" ) );
						error.appendTo( element.parent().find( "label" ) );
					}
				}
			} );
		} );
	</script>
<style>
#customer,#email,#dob {
	height: 1.5em;
	width: 20em;
	text-align: left;
	outline: none;
	cursor: text;
}

.formlabel {
	float: left;
	width: 12em;
}

#reserve {
	margin-left: 12em;
}

legend {
	padding: 1em;
	font-size: 1.2em !important;
}

div {
	margin: 1em 0 1em 0;
}
</style>
</head>
<body>

	<form id="reservation" method="get" action="">
		<fieldset class="ui-widget ui-widget-content ui-corner-all">
			<legend class="ui-widget ui-widget-header ui-corner-all">Retro
				Cinema Reservation</legend>
			<div>
				<label for="customer" class="formlabel">Name</label> <input
					type="text" id="customer" name="customer">
			</div>
			<div>
				<label for="email" class="formlabel">Email</label> <input
					type="email" id="email" name="email">
			</div>
			<div>
				<label for="dob" class="formlabel">Date of Birth</label> <input
					type="text" id="dob" name="dob">
			</div>
			<div>
				<label for="movie" class="formlabel">Choose your Movie</label>
				<div id="movie">
					<label for="movie1"><img src="saucer_men.jpg"
						alt="Invasion of the Saucer Men" style="width:200px;height:300px;"><br>Invasion
						of the<br>Saucer Men</label> <input type="radio" id="movie1"
						name="movie"> <label for="movie2"><img
						src="plan_9.jpg" alt="Plan 9 from Outer Space"
						style="width:200px;height:300px;"><br>Plan 9 from<br>Outer
						Space</label> <input type="radio" id="movie2" name="movie"> <label
						for="movie3"><img src="refer_madness.jpg"
						alt="Reefer Madness - Adults Only"
						style="width:200px;height:300px;"><br>Reefer Madness<br>Adults
						Only</label> <input type="radio" id="movie3" name="movie" class="adult">
				</div>
			</div>
			<div>
				<input type="submit" id="reserve" name="reserve" value="reserve">
			</div>
		</fieldset>
	</form>

</body>
</html>
